/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 排列5选择页面

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Tabs, Modal, Toast, Accordion,
} from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'
import Button from '@components/button'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 上期开奖
      preData: [1, 2, 3, 4, 5],
      // 选中的各位球
      checkedData: [
        [],
        [],
        [],
        [],
        [],
      ],
    }
  }

  /**
   * 点击玩法介绍
   */
  onClickWFJS=() => {
    // ..TODO
    Toast.info('完善中...', 1)
  }


  /**
   * 选好彩票
   */
  onNext=() => {
    console.log('选号了')
    // 跳转到提交页面
    this.props.history.push('/pl5/submit')
  }

  /**
   * 生成标题
   */
  createTitle=() => '直选'


  /**
   * 选中一个球
   */
  onCheck=(index, num) => {
    const { checkedData } = this.state

    if (!checkedData[index]) {
      checkedData[index] = [num]
    } else {
      const fi = checkedData[index].findIndex(v => v === num)
      if (fi !== -1) {
        checkedData[index].splice(fi, 1)
      } else {
        checkedData[index].push(num)
      }
    }
    this.setState({
      checkedData,
    })
  }

  render() {
    const {
      preData,
      checkedData,
    } = this.state
    const title = this.createTitle()
    const tabs = [
      { title: '购彩', sub: '1' },
      { title: '开奖', sub: '2' },
    ]
    // 位数
    const bitData = ['万位', '千位', '百位', '十位', '个位']
    // 数字
    const numData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    return (
      <div className="page-box">
        <NavBar
          left={<span className="app-icon icon-left" onClick={this.props.history.goBack} />}
          title={title}
          right={null}
        />
        <div className="page-content contain-footer qxc-container">
          <Tabs tabs={tabs}
            initialPage={0}
            onChange={(tab, index) => { console.log('onChange', index, tab); }}
            onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
          >
            <div>
              <div className="desc-bar">
                上期开奖
                <p className="font-red">
                  {
                    preData.map((item, index) => {
                      const result = (<span key={index.toString()}>{item}</span>)
                      return result
                    })
                  }
                </p>
              </div>
              <div className="row-item flex-row-between">
                <div className="item-left">
                  <span>每位至少选择1个号</span>
                </div>
                <div className="item-right flex-row-base">
                  <p className="flex-col-center"><span className="app-icon icon-yyz" /><span>摇一注</span></p>
                  <p className="flex-col-center"><span className="app-icon icon-yl" /><span>遗漏</span></p>
                </div>
              </div>

              <div className="content-wrap">
                {
                  bitData.map((bit, index) => {
                    const result = (
                      <div className="item-wrap flex-row-between">
                        <div className="item-left ltr-orange-red">
                          {bit}
                        </div>
                        <div className="item-right flex-row-base">
                          {
                            numData.map((num, i) => {
                              const re = (
                                <span
                                  className={checkedData[index].indexOf(num) !== -1 ? 'ball-item red checked' : 'ball-item red'}
                                  onClick={() => this.onCheck(index, num)}
                                >{num}
                                </span>
                              )
                              return re
                            })
                          }
                        </div>
                      </div>
                    )
                    return result
                  })
                }
              </div>

            </div>
            <div>
              开奖页面
            </div>
          </Tabs>
        </div>
        <div className="page-footer">
          <div className="jczq-footer">
            <div className="left-content flex-col-center " onClick={this.onClearAll}>机选</div>
            <div className="right-content">
                    每位至少选一个号
            </div>
            <Button type="red" disabled={false} onClick={this.onNext}>选好了</Button>
          </div>
        </div>
      </div>
    )
  }
}
